<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JeversonJeeHTMLRoad</title>
    <style type="text/css">
    /*01复习*/
        /* a{
            color: red;
            text-decoration: none;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }
        a:active{
            color: yellow;
        }
        a:visited{
            color: blue;
        } */
        /* 02购物车案例复习 */
        /* a{
            display: inline-block;
            width: 67px;
            height: 32px;
            background: url("110.png");
        }
        a:hover{
            background: url("110.png") bottom;
        } */
        /* 03五彩导航 */
        /*a.one,a.two,a.three,a.four{
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            text-decoration: none;
            color: white;
            line-height: 50px;
        }
        a.one{
        		background: url("images/bg1.png");
        }
        a.one:hover{
            background: url("images/bg2.png");
        }
        a.two{
        		background: url("images/bg3.jpg");
    
        }
        a.two:hover{
        		background: url("images/bg3.png");
        }
        a.three{
        		background: url("images/bg4.png");
        }
        a.three:hover{
        		background: url("images/bg5.png");
        }
        a.four{
        		background: url("images/bg6.png");
        }
        a.four{
        		background: url("images/bg7.png");
        }*/
       /*04行高单位*/
      /*.box{
      	font-size: 20px;
      	line-height: 2;
      }
      p{
      	font-size: 30px;
      }*/
     	/*05盒子模型之边框*/
     	/*.box{
     		width: 300px;
     		height: 390px;
     		background: #999;
     		border-left: 5px dashed green;
     		border-right: 12px pink dotted;
     	}*/
     	/*06边框合并*/
     	/*table{
     		width: 300px;
     		height: 500px;
     		border: 1px solid red;
     		border-collapse: collapse;
     	}
     	td{
     		border: 1px solid red;
     	}*/
     	/*07表单空间案例*/
     	.username{
     		border: 0 none;	/*去掉边框线*/
     		outline-style: none;/*去掉轮廓线*/
     		background: #ccc;
     		border: 1px dashed green;
     	}
     	.username:focus{
     		background: red;
     	}
     	.email{
     		border: 0 none;
     		outline-style: none;
     		border-bottom: 1px dotted red;
     	}
     	.search{
     		border: 0 none;
     		border: 1px solid #999;
     		background: url("search.png") no-repeat right;
     	}
     	/*08内边距*/
     	/*.box{*/
     		/*padding-top: 20px;
     		padding-right:30px;
     		padding-bottom:40px;
     		padding-left: 50px;*/
     		/*padding: 20px 30px 40px 50px;
     		width: 500px;
     		height: 300px;
     		background: red;
     	}*/
     	/*09内边距影响盒子大小*/
     	.box{
     		width: 180px;
     		height: 300px;
     		background: green;
     		padding-left: 160px;
     		padding-right: 160px;
     		border: 10px solid red;
     	}
     	/*10继承的盒子不会被撑大*/
     	/*.father{
     		width: 500px;
     		height: 300px;
     		background: #ccc;
     	}
     	.son{
     		padding: 10px 0;
     		background: green;
     	}*/
     	.nav{
     		height: 40px;
     		background: #eee;
     		border-top: 3px solid orange;
     		border-bottom: 1px solid #aaa;
     	}
     	.nav-con{
     		width: 1000px;
     		height: 40px;
     		margin: 0 auto;
     	}
     	a{
     		font: 12px/40px "microsoft yahei";
     		line-height: 40px;
     		color: #333;
     		display: inline-block;
     		height: 40px;
     		text-decoration: none;
     		padding: 0 12px;
     	}
     	a:hover{
     		background: #999;
     	}
     	/*11 垂直方向外边距合并*/
     	/*.box1,.box2{
     		width: 200px;
     		height: 200px;
     		background-color: yellow;
     	}
     	.box1{
     		margin-bottom: 50px;
     	}
     	.box2{
     		margin-top: 100px;
     	}*/
     	/*12外边距*/
     	.box{
     		width: 300px;
     		height: 300px;
     		background: #eee;
     		margin-left: 50px;
     		margin-right: 30px;
     		margin-top:20px;
     		margin-bottom: 40px;
     		
     		margin: 20px 30px 40px 50px;
     	}
     	/*13垂直方向外边距*/
     	.father{
     		width: 500px;
     		height: 300px;
     		background: #eee;
     		/*overflow: hidden;*/
     	}
     	.son{
     		width: 100px;
     		height: 100px;
     		background: red;
     		margin-top: 50px;
     	}
     	/*16行业动态案例*/
     	.news{
     		width: 238px;
     		height: 166px;
     		border: 1px solid #D9E0EE;
     		border-top: 3px solid #FF8400;
     		margin: 0 auto;
     	}
     	.news-title{
     		height: 35px;
     		border-bottom: 1px solid #D9E0EE;
     		line-height: 35px;
     		padding-left:12px;
     	}
     	ul,li{
     		list-style: none;
     		margin: 0;
     		padding: 0;
     	}
     	ul{
     		margin-top: 14px;
     	}
     	li{
     		padding-left: 19px;
     		height: 23px;
     		background: url("li_bg.jpg") no-repeat 9px 7px;
     		font-size: 14px;
     	}
     	
    </style>
</head>
<body>
    <!-- <a href="#">jeversonReview01复习</a> -->
    <!-- 02购物车复习 -->
    <!-- <a href="#"></a> -->
    <!-- 03五彩导航 -->
    <!--<a href="#" class="one">五彩导航栏</a>       
    <a href="#" class="two">五彩导航栏</a>
    <a href="#" class="three">五彩导航栏</a>
    <a href="#" class="four">五彩导航栏</a>-->
    <!--04行高单位-->
    <!--<div class="box">
    		<p>04行高单位</p>
    </div>-->
    <!--<div class="box">05盒子模型之边框</div>-->
    <!--06边框合并-->
    <!--<table cellspacing="0">
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    </table>-->
    <!--<label for="username">用户名:</label><input type="text" class="username" id="username"/><br /><br />
    邮箱:<input type="text" class="email" /><br /><br />
    搜索一下：<input type="text" class="search" />
    <!--<div class="box">08内边距</div>-->
    <!--<div class="box"><img src="1.jpg" alt="jeversonjeedemo" /></div>-->
    <!--<div class="father">
    		<div class="son"></div>
    </div>
    <div class="nav">
    		<div class="nav-con">
    			<a href="#">设置为首页</a>
    			<a href="#">手机新浪网</a>
    			<a href="#">移动客户端</a>
    		</div>
    </div>
    <div class="box1"></div>
    <div class="box2"></div>-->
    <div class="box"></div>
    <div class="father">
    		<div class="son">
    			
    		</div>
    </div>
    <div class="news">
    		<div class="news-title">JeversonJeeTitle</div>
    		<ul>
    			<li>JeversonJee is ur father</li>
    			<li>JeversonJee is ur father</li>
    			<li>JeversonJee is ur father</li>
    			<li>JeversonJee is ur father</li>
    			<li>JeversonJee is ur father</li>
    		</ul>
    </div>
</body>
</html>
